<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>侧滑菜单</title>
		<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">

		<link rel="stylesheet" href="../../css/mui.min.css">
		<style>
			.adress_left_icon {
				background: url(../../images/i8.png) 0 center no-repeat;
				background-size: auto 40%;
				padding: 1rem;
			}
			
			.rotation_gesture_icon {
				background: url(../../images/i7.png) 0 center no-repeat;
				background-size: auto 40%;
				padding: 1rem;
			}
			
			.sight_icon {
				background: url(../../images/i6.png) 0 center no-repeat;
				background-size: auto 40%;
				padding: 1rem;
			}
			
			.message_icon {
				background: url(../../images/i5.png) 0 center no-repeat;
				background-size: auto 40%;
				padding: 1rem;
			}
			
			.legend_icon {
				background: url(../../images/i4.png) 0 center no-repeat;
				background-size: auto 40%;
				padding: 1rem;
			}
			
			.forours_icon {
				background: url(../../images/i3.png) 0 center no-repeat;
				background-size: auto 40%;
				padding: 1rem;
			}
			
			.arrow_right_icon {
				background: url(../../images/i2.png) 0 center no-repeat;
				background-size: auto 100%;
				padding: 0.5rem;
				float: right;
				margin-right: 0.5rem;
			}
			
			.list_btn ul li {
				padding-top: 2rem;
				margin-left: 1rem;
				list-style: none;
			}
		</style>
	</head>

	<body style="background-color: #FFFFFF;">
		<div style="margin-top: 0.5rem;">
			<span style="width: 30%;display: inline-block;">
				<img src="../../images/i9.png" width="90%" style="margin-left: 0.5rem ;display: inline-block;" />
			</span>
			<p id="" style="display: inline-block;width: 50%;position: absolute;margin-left: 0.5rem;padding: 0.5rem;">
				<span style="font-size: 18px;padding: 0.2rem;display: inline-block;">王老师</span><br>
				<span style="font-size: 16px;padding: 0.2rem;display: inline-block;">18612346688</span>
			</p>
		</div>
		<div id="list_btn" class="list_btn">
			<ul style="margin: 0;padding: 0;">
				<li>
					<span class="adress_left_icon"></span>
					<span style="color: #888888;margin-left: 0.5rem;line-height: 0.8rem;font-size: 15px;"><strong>地理名称</strong>	</span>
					<div class="mui-switch mui-switch-mini  mui-active" style="float: right;margin-right: 0.5rem;margin-top: -0.5rem;">
						<div class="mui-switch-handle"></div>
					</div>
				</li>

				<li>
					<span class="rotation_gesture_icon"></span>
					<span style="color: #888888;margin-left: 0.5rem;line-height: 0.8rem;font-size: 15px;"><strong>旋转手势开关</strong>	</span>
					<div class="mui-switch mui-switch-mini" style="float: right;margin-right: 0.5rem;margin-top: -0.5rem;">
						<div class="mui-switch-handle"></div>
					</div>
				</li>

				<li>
					<span class="sight_icon"></span>
					<span style="color: #888888;margin-left: 0.5rem;line-height: 0.8rem;font-size: 15px;"><b>切换视觉开关</b>	</span>
					<div class="mui-switch mui-switch-mini  mui-active" style="float: right;margin-right: 0.5rem;margin-top: -0.5rem;">
						<div class="mui-switch-handle"></div>
					</div>
				</li>

				<li>
					<span class="message_icon"></span>
					<span style="color: #888888;margin-left: 0.5rem;line-height: 0.8rem;font-size: 15px;"><strong>消息推送</strong>	</span>
					<div class="mui-switch mui-switch-mini  mui-active" style="float: right;margin-right: 0.5rem;margin-top: -0.5rem;">
						<div class="mui-switch-handle"></div>
					</div>
				</li>

				<li id="exmple">
					<span class="legend_icon"></span>
					<span style="color: #888888;margin-left: 0.5rem;line-height: 0.8rem;font-size: 15px;"><strong>图例说明</strong>	</span>
					<span class="arrow_right_icon"></span>
				</li>
				<li>
					<span class="forours_icon"></span>
					<span style="color: #888888;margin-left: 0.5rem;line-height: 0.8rem;font-size: 15px;"><strong>关于我们</strong>	</span>
					<span class="arrow_right_icon"></span>
				</li>
				</u>
		</div>
		<div style="text-align: center;margin: 0;padding: 0;margin-top: 20%;">
			<img src="../../images/i1.png" width="20%" /><br>
			<span style="color: #888888;font-size: 14px;">1.0版本</span>
		</div>
		<script src="../../js/common/mui.min.js"></script>
		<script type="text/javascript" charset="utf-8">
			//关闭back、menu按键监听，这样侧滑主界面会自动获得back和memu的按键事件，仅在主界面处理按键逻辑即可；
			mui.init({
				keyEventBind: {
					backbutton: false,
					menubutton: false
				}
			});
			var main = null;
			mui.plusReady(function() {
				main = plus.webview.currentWebview().opener();
			})

			function closeMenu() {
				mui.fire(main, "menu:swiperight");
			}
			//左滑显示出来的菜单，只需监听右滑，然后将菜单关闭即可；在该菜单上左滑，不做任何操作；
			window.addEventListener("swiperight", closeMenu);
			document.getElementById("exmple").addEventListener("click", function() {
				closeMenu();
				top.location.href="exmple.html";
			})
		</script>
	</body>

</html>